import React, { Component } from 'react'
import Order from './Order'
import User from './User'
// 引入order模块中的type，改名为orderAction
import {actions as orderAction, getList} from '../store/modules/order'
// 引入user模块中的type，改名为userAction
import {actions as userAction, getInfo} from '../store/modules/user'
// 导入connect方法，将ui组件转换为容器型组件
import {connect} from 'react-redux'
// 导入bindActionCreators，将各个action一起导入
import {bindActionCreators} from 'redux'

class ReactReduxUI extends Component {
  render() {
    let {list, info, changeInfo, orderAction} = this.props;
    // orderAction包含了changeList、addList、delList
    return (
      <div>
        <p>react-redux是redux针对react进行的改版，功能与redux接近，但语法有差异。</p>
        <p>通过react-redux展示数据修改数据</p>
        <p>react-redux将组件分成两类：容器型组件（有数据和逻辑）、UI组件（没有数据和逻辑，只是呈现内容）</p>
        <Order
          list={list}
          orderAction={orderAction}
        ></Order>
        <User info={info} changeInfo={changeInfo}></User>
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  // 将state中的数据映射到props中,state是store的state
  // 如果分成的模块较多，当一个模块的数据变化时，其他模块也会一起更新，降低效率。
  // list: state.order.list,
  // info: state.user.info,
  // 优化方案是，选择性的更新 ：selectors
  // getList是一个函数，不调用就不会执行,所以节省性能。getInfo同理
  list: getList(state),
  info: getInfo(state),
})

// 修改数据
const mapDispatchToProps = (dispatch) => ({
  changeInfo: (info) => dispatch(userAction.changeInfo(info)),
  // changeList: (list) => dispatch(orderAction.changeList(list)),
  // addList: (list) => dispatch(orderAction.addList(list)),
  // delList: (list) => dispatch(orderAction.delList(list)),
  // 将修改数据的方法一次性全部导入(订单模块的方法全部导入)
  orderAction: bindActionCreators(orderAction, dispatch)
})
// 将UI组件改成容器型组件 connect：沟通、关联
// mapStateToProps:将store中的state映射到组件的props中，将数据导入当前组件。类似vuex的mapState和mapGetters
// mapDispatchToProps:将修改数据的方法映射到组件的props中
let ReactRedux = connect(mapStateToProps, mapDispatchToProps)(ReactReduxUI)
// ReactRedux是ui组件，通过connect()使他变成了容器型组件，暴露容器性组件出去
export default ReactRedux
